<template>
	<view class="payMent">
		<view class="money">
			<view>
				<text>￥</text>
				<text class="amount">{{ price }}</text>
			</view>
			<!-- <view class="payMoney">付费金额(元)</view> -->
		</view>
		<view class="line"></view>
		<!-- <view class="explain">
			<view class="explainX">
				<view class="explainX_1">付费说明:</view>
				<view class="explainX_2">收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费收费按次收费</view>
			</view>
		</view> -->
		<view class="change">
			<view class="paymode">选择支付方式</view>
			<view class="weixin" @tap="changePay(0)">
				<view class="left">
					<image src="/static/home/weixin.png"></image>
					<text>微信支付</text>
				</view>
				<view class="right">
					<image v-if="pay" src="/static/home/no.png"></image>
					<image v-else src="/static/home/selectSuccess.png"></image>
				</view>
			</view>
			<view class="ali" @tap="changePay(1)">
				<view class="left">
					<image src="/static/home/ali.png"></image>
					<text>支付宝支付</text>
				</view>
				<view class="right">
					<image v-if="pay" src="/static/home/selectSuccess.png"></image>
					<image v-else src="/static/home/no.png"></image>
				</view>
			</view>
		</view>
		<view class="footer" @tap="queryPay">确认支付</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadingImg: '',
			image: '',
			pay: false,
			price: '',
			pay_type: 'wxpay',
			course_id: '',
			is_order: false
		};
	},
	onLoad(option) {
		this.price = option.price;
		this.course_id = option.id;
	},
	onShow() {},
	methods: {
		changePay(k) {
			if (k == 0) {
				this.pay = false
			} else {
				this.pay = true
			}
		},
		// 确认支付
		queryPay() {
			const data = {
				course_id: this.course_id,
				order_type: 3,
				order_money: this.price,
				pay_type: this.pay ? 'alipay' : 'wxpay',
				payable_money: this.price
			};
			this.$api
				.post(global.apiUrls.getPurchase, {
					course_id: this.course_id,
					order_type: 3,
					order_money: this.price,
					pay_type: this.pay ? 'alipay' : 'wxpay',
					payable_money: this.price
				})
				.then(res => {
					console.log(res);
					if (res.data.code == 1) {
						if (!this.is_order) {
							if (this.pay) {
								this.zhifubaoPayInfo(res.data.data.order_sn);
							} else {
								this.Pay(res.data.data.order_sn);
							}
						} else {
							
						}
						
					} else {
						this.$message.info(res.data.msg);
					}
				});
		},
		// 支付宝支付
		zhifubaoPayInfo(order_sn) {
			// order_sn: order_sn
			this.is_order = true
			this.$api
				.post(global.apiUrls.zhifubaoPay, {
					
					order_sn: order_sn
				})
				.then(res => {
					if (res.data.code == 1) {
						// this.$message.info('支付成功');
						// this.is_order = false
						// setTimeout(() => {
						// 	uni.reLaunch({
						// 		url: '/pages/study/paySuccess?price=' + this.price
						// 	});
						// }, 500);
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.data, //微信、支付宝订单数据
							success: (res)=> {
								this.$message.info('支付成功')
								this.is_order = false
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/study/paySuccess?price=' + this.price
									});
								})
							},
							fail: (err)=> {
								console.log('fail:' + JSON.stringify(err));
								this.$message.info('支付已取消')
								this.is_order = false
							}
						})
					} else {
						this.$message.info('支付失败');
						this.is_order = false
					}
				});
		},
		// 微信支付
		Pay(order_sn) {
			let that = this
			that.is_order = true
			that.$api.post(global.apiUrls.weixinPay, {
				order_sn: order_sn,
			}).then(res => {
				if (res.data.code == 1) {
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: res.data.data, //微信、支付宝订单数据
						success: function(res) {
							// that.$message.info('支付成功')
							that.is_order = false
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/study/paySuccess?price=' + that.price
								});
							})
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
							that.$message.info('支付已取消')
							that.is_order = false
						}
					})
				} else {
					that.$message.info('支付失败')
					that.is_order = false
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.payMent {
	.money {
		// height: 268rpx;
		// line-height: 268rpx;
		text-align: center;
		color: #ff4c46;
		margin: 95rpx 0;
		.amount {
			font-size: 56rpx;
			font-weight: bold;
		}
	}
	.explain {
		padding: 0 32rpx;
		.explainX {
			background: #f5f5f5;
			color: #999999;
			padding: 32rpx;
			border-radius: 8rpx;
			.explainX_1 {
				margin-bottom: 32rpx;
				color: #333333;
			}
			.explainX_2 {
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}
	.payMoney {
		margin-top: 16rpx;
		font-size: 30rpx;
		color: #999999;
	}
	.line {
		height: 20rpx;
		background: #f5f5f5;
	}
	.change {
		padding: 32rpx;
		.paymode {
			margin-bottom: 52rpx;
		}
		.weixin {
			display: flex;
			margin-bottom: 48rpx;
			.left {
				flex: 5;
				image {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
				text {
					display: inline-block;
					transform: translateY(4rpx);
				}
			}
			.right {
				flex: 5;
				text-align: right;
				padding-top: 8rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.ali {
			display: flex;
			.left {
				flex: 5;
				image {
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
				text {
					display: inline-block;
					transform: translateY(4rpx);
				}
			}
			.right {
				flex: 5;
				text-align: right;
				padding-top: 8rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 64rpx;
		width: 686rpx;
		height: 88rpx;
		background: #267dff;
		opacity: 1;
		border-radius: 48rpx;
		margin-left: 32rpx;
		color: #ffffff;
		line-height: 88rpx;
		text-align: center;
	}
}
</style>
